<template>
	<view class="page mine" style="margin-top: -20rpx;">

		<view class="btn-group">

      <view class="btn-group-item" style="margin-top: 20rpx;margin-bottom: 20rpx;">
        <view class="">
          声音
        </view>
        <view class="switchBox">
          <switch @change="switchChange" color="#1AAD19" :checked="checked" />
        </view>
      </view>

			<view @click="onUserAgreement()" class="btn-group-item" style="margin-top: 20rpx;margin-bottom: 20rpx;">
				<view class="">
					用户协议和隐私
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

			<view @click="onAbout()" class="btn-group-item">
				<view class="">
					关于我们
				</view>
				<uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
			</view>

      <view @click="onModifyLanuage()" class="btn-group-item" style="margin-top: 20rpx;margin-bottom: 20rpx;">
        <view class="">
          语言
        </view>
        <uni-icons color="rgb(181, 181, 181)" type="right" size="20"></uni-icons>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		versionName
	} from '@/manifest.json'
	export default {
		data() {
			return {
        checked: false,
				versionName: versionName
			}
		},
		methods: {
      //change方法
      switchChange(e) {
        uni.setStorageSync("open-voice", !this.checked);
        this.checked = !this.checked
      },
      onUserAgreement() {
				uni.navigateTo({
					url: "/pages/setting/user-agreement"
				});
			},
      onAbout() {
				uni.navigateTo({
					url: "/pages/setting/about"
				});
			},
			onModifyInfo() {
				uni.navigateTo({
					url: "/pages/mine/mine-edit"
				})
			},
      onModifyLanuage() {
        uni.showModal({
          content: '暂不支持设置语言',
          showCancel: false,
        })
			},
		},

		computed: {

    },

    onShow() {
      uni.getStorage({
        key: 'open-voice',
        success: (res) => {
          this.checked = res.data
        },
        fail: () => {
          this.checked = true
        }
      });
    },
	}
</script>

<style scoped lang="scss">

	.mine {
		background-color: #ededed;
    .switchBox{
      // 调整大小
      transform: scale(0.7,0.7)
    }
		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: white;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.signature {
					margin-top: 12rpx;
					display: -webkit-box;
					/* 使其成为一个伸缩容器 */
					-webkit-box-orient: vertical;
					/* 设置子元素的排列方向为垂直 */
					overflow: hidden;
					/* 超出部分隐藏 */
					-webkit-line-clamp: 3;
					/* 限制最多显示3行 */
					text-overflow: ellipsis;
					/* 文字超出部分显示省略号 */
				}

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 40rpx;
						font-weight: 600;


					}
				}
			}

			.info-arrow {
				width: 50rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.btn-group {
			margin-top: 20rpx;

			.btn-group-item {
				font-size: 28rpx;
				background-color: white;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 33rpx 33rpx;
				border-bottom: 1px #eee solid;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>